<!doctype html>
<html>
    <head>
        <title>表格布局</title>
        <meta charset="utf-8">
    </head>
    <body>
        <table width="100%">
            <tr>
                <td colspan="2" style="background-color: blue">
                    <h1 align="center">导航</h1>
                </td>
                
            </tr>
            <tr>
                <td style="background-color: red" width="50%">
                    <dl>
                        <dt>推荐文章</dt>
                        <dd>
                            <ul>
                                <li>一个猴子成长史</li>
                                <li>你看个毛线</li>
                                <li>我就瞅你咋地</li>
                                <li>村里出了个半边天</li>
                            </ul>
                        </dd>
                    </dl>
                </td>
                <td style="background-color: yellow" width="50%">
                    <h1>一个猴子的成长史</h1>
                    <p>
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    </p>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="background: black">
                    <h1 align="center" style="color:red">页脚</h1>
                </td>
            </tr>
        </table>
    </body>
</html>